<template>
  <a-card title="听课教师任务分配" :bordered="false">
    <div class="table-operator">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item label="学年学期">
            <a-select v-model="queryParams.academicTerm" placeholder="请选择学年学期">
              <a-select-option value="2023-2024-1">2023-2024学年第一学期</a-select-option>
              <a-select-option value="2023-2024-2">2023-2024学年第二学期</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="学院">
            <a-select v-model="queryParams.college" placeholder="请选择学院">
              <a-select-option value="1">信息工程系</a-select-option>
              <a-select-option value="2">建筑工程系</a-select-option>
              <a-select-option value="3">机电工程系</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="教师">
            <a-select v-model="queryParams.teacher" placeholder="请选择教师">
              <a-select-option value="T001">李红梅</a-select-option>
              <a-select-option value="T002">李娜</a-select-option>
              <a-select-option value="T003">王芳</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-button type="primary" @click="handleSearch" style="margin-right: 8px">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </a-col>
      </a-row>
    </div>

    <div class="table-operator" style="margin-bottom: 16px">
      <a-button type="primary" @click="showModal">分配任务</a-button>
      <a-button @click="batchDelete" :disabled="!selectedRowKeys.length">批量删除</a-button>
    </div>

    <a-table
      :columns="columns"
      :data-source="data"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :pagination="pagination"
      row-key="id"
      size="middle"
      @change="handleTableChange"
    >
      <template slot="status" slot-scope="text">
        <a-badge :status="text === '已完成' ? 'success' : text === '进行中' ? 'processing' : 'default'" :text="text" />
      </template>
      <template slot="action" slot-scope="text, record">
        <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
        <a-button type="link" size="small" @click="handleDelete(record)">删除</a-button>
        <a-button type="link" size="small" @click="handleViewDetail(record)">查看详情</a-button>
      </template>
    </a-table>

    <a-modal
      title="分配听课任务"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      :confirm-loading="confirmLoading"
      width="800px"
    >
      <a-form :form="form" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="学年学期">
              <a-select
                v-decorator="[
                  'academicTerm',
                  { rules: [{ required: true, message: '请选择学年学期' }] }
                ]"
                placeholder="请选择学年学期"
              >
                <a-select-option value="2023-2024-1">2023-2024学年第一学期</a-select-option>
                <a-select-option value="2023-2024-2">2023-2024学年第二学期</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="听课教师">
              <a-select
                v-decorator="[
                  'teacher',
                  { rules: [{ required: true, message: '请选择听课教师' }] }
                ]"
                placeholder="请选择听课教师"
                show-search
                option-filter-prop="children"
              >
                <a-select-option value="T001">李红梅</a-select-option>
                <a-select-option value="T002">李娜</a-select-option>
                <a-select-option value="T003">王芳</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="被听课教师">
              <a-select
                v-decorator="[
                  'observedTeacher',
                  { rules: [{ required: true, message: '请选择被听课教师' }] }
                ]"
                placeholder="请选择被听课教师"
                show-search
                option-filter-prop="children"
              >
                <a-select-option value="T004">阿依古丽·买买提</a-select-option>
                <a-select-option value="T005">钱副教授</a-select-option>
                <a-select-option value="T006">孙讲师</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="课程">
              <a-select
                v-decorator="[
                  'course',
                  { rules: [{ required: true, message: '请选择课程' }] }
                ]"
                placeholder="请选择课程"
                show-search
                option-filter-prop="children"
              >
                <a-select-option value="C001">数据结构</a-select-option>
                <a-select-option value="C002">算法分析</a-select-option>
                <a-select-option value="C003">数据库原理</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="听课日期">
              <a-date-picker
                v-decorator="[
                  'observationDate',
                  { rules: [{ required: true, message: '请选择听课日期' }] }
                ]"
                style="width: 100%"
                placeholder="请选择听课日期"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="听课节次">
              <a-select
                v-decorator="[
                  'classTime',
                  { rules: [{ required: true, message: '请选择听课节次' }] }
                ]"
                placeholder="请选择听课节次"
              >
                <a-select-option value="1-2">第1-2节</a-select-option>
                <a-select-option value="3-4">第3-4节</a-select-option>
                <a-select-option value="5-6">第5-6节</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="备注">
          <a-textarea
            v-decorator="['remarks']"
            placeholder="请输入备注信息"
            :rows="4"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        academicTerm: undefined,
        college: undefined,
        teacher: undefined,
      },
      columns: [
        {
          title: '任务ID',
          dataIndex: 'id',
          width: '8%',
        },
        {
          title: '听课教师',
          dataIndex: 'teacherName',
          width: '12%',
        },
        {
          title: '被听课教师',
          dataIndex: 'observedTeacherName',
          width: '12%',
        },
        {
          title: '课程名称',
          dataIndex: 'courseName',
          width: '15%',
        },
        {
          title: '听课日期',
          dataIndex: 'observationDate',
          width: '10%',
        },
        {
          title: '听课节次',
          dataIndex: 'classTime',
          width: '10%',
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: '10%',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '23%',
          scopedSlots: { customRender: 'action' },
        },
      ],
      data: [
        {
          id: 'T001-2023-1',
          teacherName: '李红梅',
          observedTeacherName: '阿依古丽·买买提',
          courseName: '数据结构',
          observationDate: '2023-09-15',
          classTime: '3-4节',
          status: '已完成',
        },
        {
          id: 'T002-2023-2',
          teacherName: '李娜',
          observedTeacherName: '钱副教授',
          courseName: '算法分析',
          observationDate: '2023-10-10',
          classTime: '1-2节',
          status: '进行中',
        },
        {
          id: 'T003-2023-3',
          teacherName: '王芳',
          observedTeacherName: '孙讲师',
          courseName: '数据库原理',
          observationDate: '2023-11-05',
          classTime: '5-6节',
          status: '未开始',
        },
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30', '50'],
        showTotal: total => `共 ${total} 条`,
      },
      selectedRowKeys: [],
      visible: false,
      confirmLoading: false,
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    handleSearch() {
      console.log('查询参数:', this.queryParams);
      // 这里应该调用API获取数据
      this.pagination.current = 1;
      this.fetchData();
    },
    handleReset() {
      this.queryParams = {
        academicTerm: undefined,
        college: undefined,
        teacher: undefined,
      };
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    handleTableChange(pagination) {
      this.pagination = pagination;
      this.fetchData();
    },
    fetchData() {
      // 模拟API调用
      console.log('获取数据，页码:', this.pagination.current, '每页:', this.pagination.pageSize);
    },
    showModal() {
      this.visible = true;
      this.$nextTick(() => {
        this.form.resetFields();
      });
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;
          console.log('表单数据:', values);
          // 模拟API调用
          setTimeout(() => {
            this.visible = false;
            this.confirmLoading = false;
            this.$message.success('任务分配成功');
            this.fetchData();
          }, 1000);
        }
      });
    },
    handleCancel() {
      this.visible = false;
    },
    handleEdit(record) {
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          academicTerm: '2023-2024-1',
          teacher: record.id.split('-')[0],
          observedTeacher: record.observedTeacherName,
          course: record.courseName,
          observationDate: this.$moment(record.observationDate),
          classTime: record.classTime.replace('节', ''),
          remarks: '这是备注信息',
        });
      });
    },
    handleDelete(record) {
      this.$confirm({
        title: '确认删除',
        content: `确定要删除 ${record.teacherName} 对 ${record.observedTeacherName} 的听课任务吗？`,
        onOk: () => {
          // 模拟删除操作
          this.data = this.data.filter(item => item.id !== record.id);
          this.$message.success('删除成功');
        },
      });
    },
    batchDelete() {
      this.$confirm({
        title: '确认批量删除',
        content: `确定要删除选中的 ${this.selectedRowKeys.length} 条听课任务吗？`,
        onOk: () => {
          // 模拟批量删除操作
          this.data = this.data.filter(item => !this.selectedRowKeys.includes(item.id));
          this.selectedRowKeys = [];
          this.$message.success('批量删除成功');
        },
      });
    },
    handleViewDetail(record) {
      this.$info({
        title: '听课任务详情',
        width: 600,
        content: (
          <div>
            <p><strong>任务ID：</strong>{record.id}</p>
            <p><strong>听课教师：</strong>{record.teacherName}</p>
            <p><strong>被听课教师：</strong>{record.observedTeacherName}</p>
            <p><strong>课程名称：</strong>{record.courseName}</p>
            <p><strong>听课日期：</strong>{record.observationDate}</p>
            <p><strong>听课节次：</strong>{record.classTime}</p>
            <p><strong>状态：</strong>{record.status}</p>
          </div>
        ),
        onOk() {},
      });
    },
  },
};
</script>

<style scoped>
.table-operator {
  margin-bottom: 16px;
}
</style>